<template>
  <div>
    <headerMiddle title="个人中心" />
    <div class="profile" @click="editProfile">
      <!-- <img class="portrait"
        src="https://s.cn.bing.net/th?id=ODL.bd89ee40b60392f3d4e21974b7d34493&w=146&h=146&c=7&rs=1&qlt=80&dpr=1.5&pid=RichNav"
        alt
      /> -->
      <img  :src="profile.head_img" alt="" class="portrait">
     
      <div class="profile-middle">
        
        <div class="name">
     {{profile.nickname}}

          <span v-if="profile.gender==1" class="iconfont iconxingbienan"></span>
          <span v-else class="iconfont iconxingbienv"></span>
        
        </div>
            <div class="time">2019-11-11</div>
      </div>
      <span class="iconfont iconjiantou1"></span>
    </div>
    <cellBar  label="我的关注" desc="关注的用户" @jump='$router.push("/myfollow")'/>
    <cellBar  label="我的跟帖" desc="跟帖/回复" @jump='$router.push("/mycomments")'/>
    <cellBar  label="我的收藏" desc="文章/视频" @jump='$router.push("/mycollections")'/>
    <cellBar  label="设置" @jump='editProfile'/>
    <cellBar  label="退出" @jump='logout'/>
  </div>
</template>

<script>
import authInput from "../components/authInput";
import cellBar from '../components/cellBar'
import headerMiddle from '../components/headerMiddle'
export default {
  components: {
    authInput,
    cellBar,
    headerMiddle
  },
  data(){
    return{
      profile:{
         

      }
    }
  },
  methods:{
      jumpToPage(label){
          console.log(label);
          console.log(this.profile);
      },
      editProfile(){
        this.$router.push({
          path:'/editProfile'
        })
      },
      asdas(){
          this.$axios({
        url: "/user/"+localStorage.getItem('user_id'),
        method: "get",
        headers:{
          Authorization :localStorage.getItem('token')
        }
      }).then(res => {
        console.log(res);
        this.profile=res.data.data
        if( !this.profile.head_img){
          this.profile.head_img='/static/imgs/11.png'
        }else{
           this.profile.head_img= this.$axios.defaults.baseURL + this.profile.head_img
        }
      })
      },
      logout(){
            // 清除 token 清除 user_id
        localStorage.removeItem('token')
        localStorage.removeItem('user_id')
         // replace 方法可以替换掉当前页的记录
        this.$router.replace({
          // 退出后跳回登录页面
          path:'/login'
        })
      }
    
  },
  mounted(){
     this.asdas()
  }
}
</script >

<style scoped lang='less' >
    .profile{
    display: flex;      
    justify-content: space-between;
    padding: 8.333vw 4.167vw 8.333vw 5.556vw;
    font-size: 14px;
    border-bottom: 1.389vw solid #ededed;
    align-items: center;
    .portrait{
        width:19.444vw ;
        height: 19.444vw;
        border-radius:50%;
    }
    .profile-middle{
        flex: 1;
        padding-left: 5.556vw;
    }
    
    }
</style>